<!DOCTYPE html>
<html>
<head lang="zh-CN">
    <meta charset="UTF-8">
    <title>demo01</title>
    <!-- Angular Material style sheet -->
    <link rel="stylesheet" href="../base/angular-material/angular-material.css">

    <style>
        .buttondemoBasicUsage section {
            background: #f7f7f7;
            border-radius: 3px;
            text-align: center;
            margin: 1em;
            position: relative !important;
            padding-bottom: 10px; }
        .buttondemoBasicUsage md-content {
            margin-right: 7px; }
        .buttondemoBasicUsage section .md-button {
            margin-top: 16px;
            margin-bottom: 16px; }
        .buttondemoBasicUsage .label {
            position: absolute;
            bottom: 5px;
            left: 7px;
            font-size: 14px;
            opacity: 0.54; }
        .card-media {
            background-color: #999999;
        }

    </style>

</head>
<body>

<div ng-controller="AppCtrl" ng-cloak="" class="buttondemoBasicUsage" ng-app="MyApp">

    <md-content >

        <section layout="row" layout-sm="column" layout-align="center center" layout-wrap="">
            <md-button>{{title1}}</md-button>
            <md-button md-no-ink="" class="md-primary">Primary (md-noink)</md-button>
            <md-button ng-disabled="true" class="md-primary">Disabled</md-button>
            <md-button class="md-warn">{{title4}}</md-button>
            <div class="label">Flat</div>
        </section>

        <section layout="row" layout-sm="column" layout-align="center center" layout-wrap="">
            <md-button class="md-raised">Button</md-button>
            <md-button class="md-raised md-primary">Primary</md-button>
            <md-button ng-disabled="true" class="md-raised md-primary">Disabled</md-button>
            <md-button class="md-raised md-warn">Warn</md-button>
            <div class="label">Raised</div>
        </section>

        <section layout="row" layout-sm="column" layout-align="center center" layout-wrap="">
            <md-button class="md-fab" aria-label="Eat cake">
                <!--<md-icon md-svg-src="../base/icons/demoLoadSvgIconsFromUrl/img/icons/cake.svg"></md-icon>-->
            </md-button>

            <md-button class="md-fab md-primary" aria-label="Use Android">
                <!--<md-icon md-svg-src="img/icons/android.svg"></md-icon>-->
            </md-button>

            <md-button class="md-fab" ng-disabled="true" aria-label="Comment">
                <!--<md-icon md-svg-src="img/icons/ic_comment_24px.svg"></md-icon>-->
            </md-button>

            <md-button class="md-fab md-primary md-hue-2" aria-label="Profile">
                <!--<md-icon md-svg-src="img/icons/ic_people_24px.svg"></md-icon>-->
            </md-button>

            <md-button class="md-fab md-mini" aria-label="Eat cake">
                <!--<md-icon md-svg-src="img/icons/cake.svg"></md-icon>-->
            </md-button>

            <md-button class="md-fab md-mini md-primary" aria-label="Use Android">
                <!--<md-icon md-svg-src="img/icons/android.svg" style="color: greenyellow;"></md-icon>-->
            </md-button>
            <div class="label">FAB</div>
        </section>

        <section layout="row" layout-sm="column" layout-align="center center" layout-wrap="">
            <md-button ng-href="{{googleUrl}}" target="_blank">Default Link</md-button>
            <md-button class="md-primary" ng-href="{{googleUrl}}" target="_blank">Primary Link</md-button>

            <md-button>Default Button</md-button>
            <div class="label">Link vs. Button</div>
        </section>

        <section layout="row" layout-sm="column" layout-align="center center" layout-wrap="">
            <md-button class="md-primary md-hue-1">Primary Hue 1</md-button>
            <md-button class="md-warn md-raised md-hue-2">Warn Hue 2</md-button>
            <md-button class="md-accent">Accent</md-button>
            <md-button class="md-accent md-raised md-hue-1">Accent Hue 1</md-button>
            <div class="label">Themed</div>
        </section>

        <!--<section layout="row" layout-sm="column" layout-align="center center" layout-wrap="">-->
            <!--<md-button class="md-icon-button md-primary" aria-label="Settings">-->
                <!--&lt;!&ndash;<md-icon md-svg-icon="img/icons/menu.svg"></md-icon>&ndash;&gt;-->
            <!--</md-button>-->
            <!--<md-button class="md-icon-button md-accent" aria-label="Favorite">-->
                <!--&lt;!&ndash;<md-icon md-svg-icon="img/icons/favorite.svg"></md-icon>&ndash;&gt;-->
            <!--</md-button>-->
            <!--<md-button class="md-icon-button" aria-label="More">-->
                <!--&lt;!&ndash;<md-icon md-svg-icon="img/icons/more_vert.svg"></md-icon>&ndash;&gt;-->
            <!--</md-button>-->
            <!--<md-button href="http://google.com" title="Launch Google.com in new window" target="_blank" ng-disabled="true" aria-label="Google.com" class="md-icon-button launch">-->
                <!--&lt;!&ndash;<md-icon md-svg-icon="img/icons/launch.svg"></md-icon>&ndash;&gt;-->
            <!--</md-button>-->
            <!--<md-input>-->

            <!--</md-input>-->
            <!--<div class="label">Icon Button</div>-->
        <!--</section>-->

        <section>

            <md-card>
                <md-card-title>
                    <md-card-title-text>
                        <span class="md-headline">Card with image</span>
                        <span class="md-subhead">Large</span>
                    </md-card-title-text>

                    <md-card-title-media>
                        <div class="md-media-lg card-media"></div>
                    </md-card-title-media>
                </md-card-title>
                <md-card-actions layout="row" layout-align="end center">
                    <md-button>Action 1</md-button>
                    <md-button>Action 2</md-button>
                </md-card-actions>
            </md-card>


            <div class="label">self define</div>
        </section>


    </md-content>

    <div>

        <fieldset class="standard">
            <legend>Using <code>ng-model</code></legend>
            <md-checkbox ng-model="data.cb1" aria-label="Checkbox 1">

            </md-checkbox>
        </fieldset>
    </div>
</div>


<!-- Angular Material requires Angular.js Libraries -->
<script src="../base/angular/angular.js"></script>
<script src="../base/angular-animate/angular-animate.js"></script>
<script src="../base/angular-aria/angular-aria.js"></script>
<script src="../base/angular-messages/angular-messages.js"></script>

<!-- Angular Material Library -->
<script src="../base/angular-material/angular-material.js"></script>

<script type="text/javascript">

    demo01 = angular.module('MyApp', ['ngMaterial', 'ngMessages']);
    demo01.controller('AppCtrl', function($scope) {
        $scope.title1 = 'Button';
        $scope.title4 = 'Warn';
        $scope.isDisabled = true;

        $scope.googleUrl = 'http://google.com';
//        $scope.data.cb1 = true;
    });

</script>

</body>
</html>